/*
 * @Author: ray
 * @Date:   2019-06-18 14:01:40
 * @Last Modified by:   ray
 * @Last Modified time: 2019-06-19 18:51:49
 */
import "./ZenSlider.css";
import ic_left from "./img/ic_left.png";
import ic_right from "./img/ic_right.png";
import ic_nsz from "./img/ic_nsz.png";
import ic_ssz from "./img/ic_ssz.png";
import ic_del from "./img/ic_del.png";
import ic_download from "./img/ic_download.png";
import ic_fd from "./img/ic_fd.png";
import ic_sx from "./img/ic_sx.png";
import ZenDragable from "@root/components/ZenUI/ZenDragable/ZenDragable";
/**
 * ZenSlider description
 * @param {object} props [description]
 * @example
 <ZenSlider imgList={[licenseUrl]} callbackList="" />
 */
export default function ZenSlider(props) {
	const { imgList, callbackList } = props;
	if (!ZenSlider.styleObject) {
		ZenSlider.styleObject = {};
	}
	/*if (imgList.length < 2) {
		Uts.mergeArray(imgList, [
			"https://www.rjmart.cn/download/reagent/image/b24a5870/89819828-528f-483e-a755-c546eb82c565.jpg",
			"https://images.rjmart.cn/image/b24a5870/1fe7e7b4-502a-4251-ada7-1355ea6ea4ba.jpg",
			"https://www.rjmart.cn/download/reagent/image/b24a5870/BL_TMP0863_01.png"
		]);
	}*/
	const [currentState, updateState] = usePartState({
		currentIndex: 0,
		activeImgStyle: {}
	});

	function getMaxIndex(swithType) {
		if (swithType == "left") {
			if (currentState.currentIndex == 0) {
				return 0;
			} else {
				return currentState.currentIndex - 1;
			}
		} else if (swithType == "right") {
			if (currentState.currentIndex == imgList.length - 1) {
				return imgList.length - 1;
			} else {
				return currentState.currentIndex + 1;
			}
		}
	}

	function getStyle(index) {
		if (index == currentState.currentIndex) {
			return currentState.activeImgStyle;
		}
	}

	function addStyle(styleType) {
		ZenSlider.styleObject[currentState.currentIndex] =
			ZenSlider.styleObject[currentState.currentIndex] || {};
		switch (styleType) {
			case "fd":
				ZenSlider.styleObject[currentState.currentIndex].scale =
					ZenSlider.styleObject[currentState.currentIndex].scale || 0;
				ZenSlider.styleObject[currentState.currentIndex].scale += 1.3;
				ZenSlider.styleObject[currentState.currentIndex].rotate =
					ZenSlider.styleObject[currentState.currentIndex].rotate ||
					0;
				updateState({
					activeImgStyle: {
						transform:
							"scale(" +
							ZenSlider.styleObject[currentState.currentIndex]
								.scale +
							") " +
							"rotate(" +
							ZenSlider.styleObject[currentState.currentIndex]
								.rotate +
							"deg) "
					}
				});
				break;
			case "sx":
				ZenSlider.styleObject[currentState.currentIndex].scale =
					ZenSlider.styleObject[currentState.currentIndex].scale || 0;
				if (
					ZenSlider.styleObject[currentState.currentIndex].scale > 0.8
				) {
					ZenSlider.styleObject[
						currentState.currentIndex
					].scale -= 0.8;
				} else {
					ZenSlider.styleObject[
						currentState.currentIndex
					].scale = 0.3;
				}
				ZenSlider.styleObject[currentState.currentIndex].rotate =
					ZenSlider.styleObject[currentState.currentIndex].rotate ||
					0;
				updateState({
					activeImgStyle: {
						transform:
							"scale(" +
							ZenSlider.styleObject[currentState.currentIndex]
								.scale +
							") " +
							"rotate(" +
							ZenSlider.styleObject[currentState.currentIndex]
								.rotate +
							"deg) "
					}
				});
				break;
			case "nsz":
				ZenSlider.styleObject[currentState.currentIndex].rotate =
					ZenSlider.styleObject[currentState.currentIndex].rotate ||
					0;
				ZenSlider.styleObject[currentState.currentIndex].rotate -= 90;
				ZenSlider.styleObject[currentState.currentIndex].scale =
					ZenSlider.styleObject[currentState.currentIndex].scale || 1;
				updateState({
					activeImgStyle: {
						transform:
							"rotate(" +
							ZenSlider.styleObject[currentState.currentIndex]
								.rotate +
							"deg) " +
							"scale(" +
							ZenSlider.styleObject[currentState.currentIndex]
								.scale +
							")"
					}
				});
				break;
			case "ssz":
				ZenSlider.styleObject[currentState.currentIndex].rotate =
					ZenSlider.styleObject[currentState.currentIndex].rotate ||
					0;
				ZenSlider.styleObject[currentState.currentIndex].rotate += 90;
				ZenSlider.styleObject[currentState.currentIndex].scale =
					ZenSlider.styleObject[currentState.currentIndex].scale || 1;
				updateState({
					activeImgStyle: {
						transform:
							"rotate(" +
							ZenSlider.styleObject[currentState.currentIndex]
								.rotate +
							"deg) " +
							"scale(" +
							ZenSlider.styleObject[currentState.currentIndex]
								.scale +
							")"
					}
				});
				break;
			default:
		}
	}

	function toggleSlider(type) {
		switch (type) {
			case "left":
				ZenSlider.styleObject = {};
				updateState({
					currentIndex: getMaxIndex("left"),
					activeImgStyle: {}
				});
				break;
			case "right":
				ZenSlider.styleObject = {};
				updateState({
					currentIndex: getMaxIndex("right"),
					activeImgStyle: {}
				});
				break;
			default:
		}
	}

	return (
		<div className="zen_fs-14 zen_ps-re ZenSlider">
			<img
				src={ic_left}
				onClick={() => {
					toggleSlider("left");
				}}
				className="zen_c zen_z-i-2 zen_ps-ab zen_l-96 zen_t-200"
				alt=""
			/>
			<img
				src={ic_right}
				onClick={() => {
					toggleSlider("right");
				}}
				className="zen_c zen_z-i-2 zen_ps-ab zen_r-96 zen_t-200"
				alt=""
			/>
			<div className="zen_ps-re ZenSlider-img-wrap">
				{imgList &&
					imgList.map(function(item, index) {
						return (
							<React.Fragment key={item}>
								<ZenDragable wrapClass="ZenSlider-drag">
									<img
										className={Uts.sc([
											"ZenSlider-m-img",
											currentState.currentIndex == index
												? "ZenSlider-m-img-active"
												: ""
										])}
										src={item}
										alt=""
										style={getStyle(index)}
									/>
								</ZenDragable>
								{index == 0 && (
									<img
										src={ic_del}
										onClick={callbackList[0]}
										className="zen_c zen_z-i-2 zen_ps-ab zen_t-12 zen_r-36"
										style={{ width: "25px" }}
										alt=""
									/>
								)}
							</React.Fragment>
						);
					})}
			</div>
			<div className="ZenSlider-tools zen_w-p100 zen_ps-ab zen_b-95 zen_t-c">
				<img
					src={ic_fd}
					onClick={() => {
						addStyle("fd");
					}}
					className="zen_c zen_z-i-2"
					alt=""
				/>
				<img
					src={ic_sx}
					onClick={() => {
						addStyle("sx");
					}}
					className="zen_c zen_z-i-2"
					alt=""
				/>
				<img
					src={ic_nsz}
					onClick={() => {
						addStyle("nsz");
					}}
					className="zen_c zen_z-i-2"
					alt=""
				/>
				<img
					src={ic_ssz}
					onClick={() => {
						addStyle("ssz");
					}}
					className="zen_c zen_z-i-2"
					alt=""
				/>
			</div>
			<div className="ZenSlider-thumb zen_w-p100 zen_ps-ab zen_b-0 zen_t-c">
				{imgList &&
					imgList.map(function(item, index) {
						return (
							<img
								className={Uts.sc([
									"ZenSlider-m-img-thumb",
									currentState.currentIndex == index
										? "ZenSlider-m-thumb-active"
										: ""
								])}
								onClick={() => {
									ZenSlider.styleObject = {};
									updateState({
										currentIndex: index,
										activeImgStyle: {}
									});
								}}
								key={item}
								src={item}
								alt=""
								style={{}}
							/>
						);
					})}
			</div>
		</div>
	);
}
